import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

Rectangle{
    width: 320; height: 240
    color: "gray"

    Text{
        id: text1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 20
        text : "Text One"
        color: "blue"
        font.pixelSize: 32
    }

    Text {
        id: text2
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: text1.bottom
        anchors.topMargin: 8
        text: "Text Two"
        color: "green"
        font.pixelSize: 32
    }

    Button{
        id: changeBtn
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 20
        text: "Change"
        style: Component{
            id: btnStyle
            ButtonStyle{
                background: Rectangle{
                    implicitHeight: 50; implicitWidth: 140
                    radius: 25
                    border.color: control.hovered ? "white" : "lightgreen"
                    border.width: control.hovered || control.pressed? 2 : 1
                    color: control.hovered ? "lightgreen": "white"
                }
            }
        }
    }

    Connections{
        target:changeBtn
        onClicked : {
            text1.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1);
            text2.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1);
        }
    }

    Component.onCompleted: {
        console.log("C++ Type: ", text1)
        console.log("C++ Type: ", changeBtn)
        console.log("C++ Tyep: ", changeBtn)
    }
}
